<template>
  <div class="videosurveillance-container">
    <!-- <div class="page-title">
      <svg class="icon icon-zhibanguanli" aria-hidden="true">
        <use xlink:href="#icon-zhibanguanli"/>
      </svg>
      <span>视频监控详情页面</span>
      <pagego :path="equipmentmngPath"/>
    </div> -->
    <div class="main-content">
      <div :class="isCloudPlatformShow ? 'short-video-width' : ''" class="camera-video-container">
        <img v-if="cameraStatus === '1'" src="../../../../assets/img/video.png" width="100%">
        <img v-else src="../../../../assets/img/video2.png" width="100%">
        <div v-if="cameraStatus === '1'" class="open-cloud-platform" @click="toogleShowCloud">
          <span v-if="!isCloudPlatformShow">打开云台</span>
          <span v-else>收起</span>
        </div>
      </div>
      <div :class="isCloudPlatformShow ? 'show-cloud-patform-box' : ''" class="cloud-platform-ctrl">
        <!-- 云台控制 -->
        <div class="ctrl-box">
          <h5 class="title">云台控制</h5>
          <!-- 按钮区域 -->
          <div class="ctrl-btns">
            <!-- 第一排按钮 -->
            <div class="ctrl-btns-row">
              <!-- 左上 -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <svg class="icon icon-yuntaizuoshang" aria-hidden="true">
                  <use xlink:href="#icon-yuntaizuoshang"/>
                </svg>
              </div>
              <!-- 上 -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <svg class="icon icon-yuntaishang" aria-hidden="true">
                  <use xlink:href="#icon-yuntaishang"/>
                </svg>
              </div>
              <!-- 右上 -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <svg class="icon icon-yuntaiyoushang" aria-hidden="true">
                  <use xlink:href="#icon-yuntaiyoushang"/>
                </svg>
              </div>
              <!-- 缩放+ -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <i class="el-icon-plus"/>
              </div>
              <div class="ctrl-btn ctrl-text">缩放</div>
              <!-- 缩放- -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <i class="el-icon-minus"/>
              </div>
            </div>
            <!-- 第二排按钮 -->
            <div class="ctrl-btns-row">
              <!-- 左 -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <svg class="icon icon-yuntaizuo" aria-hidden="true">
                  <use xlink:href="#icon-yuntaizuo"/>
                </svg>
              </div>
              <!-- 刷新 -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <i class="el-icon-refresh"/>
              </div>
              <!-- 右 -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <svg class="icon icon-yuntaiyou" aria-hidden="true">
                  <use xlink:href="#icon-yuntaiyou"/>
                </svg>
              </div>
              <!-- 聚焦+ -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <i class="el-icon-plus"/>
              </div>
              <div class="ctrl-btn ctrl-text">聚焦</div>
              <!-- 聚焦- -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <i class="el-icon-minus"/>
              </div>
            </div>
            <!-- 第三排按钮 -->
            <div class="ctrl-btns-row">
              <!-- 左下 -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <svg class="icon icon-yuntaizuoxia" aria-hidden="true">
                  <use xlink:href="#icon-yuntaizuoxia"/>
                </svg>
              </div>
              <!-- 下 -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <svg class="icon icon-yuntaixia" aria-hidden="true">
                  <use xlink:href="#icon-yuntaixia"/>
                </svg>
              </div>
              <!-- 右下 -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <svg class="icon icon-yuntaiyouxia" aria-hidden="true">
                  <use xlink:href="#icon-yuntaiyouxia"/>
                </svg>
              </div>
              <!-- 光圈+ -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <i class="el-icon-plus"/>
              </div>
              <div class="ctrl-btn ctrl-text">光圈</div>
              <!-- 光圈- -->
              <div class="ctrl-btn" @click="handleCtrlBtn">
                <i class="el-icon-minus"/>
              </div>
            </div>
          </div>
          <!-- 滑块区域 -->
          <div class="slider-box">
            <span class="demonstration">云台速度</span>
            <el-slider v-model="sliderValue" class="slider-color" @change="silderValueChange"/>
          </div>
        </div>
        <!-- 预制位管理 -->
        <div class="position-mng-box">
          <h5 class="title" @click="toogleClickShowPositionMng">预置位管理</h5>
          <el-collapse-transition>
            <div v-if="positonMngBoxShow">
              <ul class="position-list">
                <!-- 渲染预制位管理列表 -->
                <li v-for="(item, index) in positionList" :key="item.id">
                  <span class="list-ponit"/>
                  <span v-html="item.name"/>
                  <div class="right-btns-box">
                    <a class="position-list-btn back">
                      <svg class="icon icon-return2fanhuiyou" aria-hidden="true">
                        <use xlink:href="#icon-return2fanhuiyou"/>
                      </svg>
                    </a>
                    <a class="position-list-btn del" @click="handleClickDelete(index)">
                      <i class="el-icon-delete icon-color"/>
                    </a>
                  </div>
                </li>
              </ul>
              <div class="add-item-box">
                <div style="text-align: right; padding-right: 14px; margin-top: 5px; margin-bottom: 10px;">
                  <el-button type="primary" size="mini" class="add-btn-class" @click="showAddModel">添加</el-button>
                </div>
                <el-collapse-transition>
                  <div v-if="isaddModelShow">
                    <div class="positon-item">
                      <span class="item-name-span">预设位ID</span>
                      <el-select v-model="positionID" size="mini" class="short-width">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </div>
                    <div class="positon-item">
                      <span class="item-name-span name-span">名称<i style="display:inline-block; width:100%;"/></span>
                      <el-input v-model="positionName" size="mini" class="position-name-input short-width"/>
                    </div>
                    <div style="text-align: right; padding-right: 14px; margin-top: 5px; margin-bottom: 10px;">
                      <el-button type="success" size="mini" class="confirm-btn-class" @click="submitData">确定</el-button>
                    </div>
                  </div>
                </el-collapse-transition>
              </div>
            </div>
          </el-collapse-transition>
        </div>
        <!-- 轮巡 -->
        <div class="wheel-patrol-box">
          <h5 class="title" @click="toogleClickShowWheelPatrol">轮巡</h5>
          <el-collapse-transition>
            <div v-if="whellPatrolBoxShow">
              <div v-for="item in whellPatrolList" :key="item.group_id" class="wheel-patrol-item">
                <span class="item-title" v-html="item.group_name"/>
                <ul class="position-list">
                  <li v-for="l in item.child_list" :key="l.id">
                    <span class="list-ponit"/>
                    <span v-html="l.title"/>
                  </li>
                </ul>
              </div>
            </div>
          </el-collapse-transition>
        </div>
      </div>
      <div v-if="cameraStatus === '1'" class="video-tools-box">
        <svg class="icon icon-shipinleidanhuamian" aria-hidden="true">
          <use xlink:href="#icon-shipinleidanhuamian"/>
        </svg>
        <svg class="icon icon-gonggecaozuo" aria-hidden="true">
          <use xlink:href="#icon-gonggecaozuo"/>
        </svg>
        <svg class="icon icon-zuixinICON--" aria-hidden="true">
          <use xlink:href="#icon-zuixinICON--"/>
        </svg>
      </div>
      <div v-if="false" class="video-tools-box">
        <svg class="icon icon-zanting" aria-hidden="true">
          <use xlink:href="#icon-zanting"/>
        </svg>
        <svg class="icon icon-quanpingzuidahua" aria-hidden="true">
          <use xlink:href="#icon-quanpingzuidahua"/>
        </svg>
      </div>
      <div v-if="cameraStatus === '2'" class="playback-content">
        <div class="playback-search-box">
          <span class="margin-span">录像类型</span>
          <el-select v-model="videoType" placeholder="请选择录像类型" size="small" class="short-input">
            <el-option
              v-for="item in videoTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <span class="margin-span">开始时间</span>
          <el-date-picker
            v-model="startDateTime"
            class="short-input"
            size="small"
            type="datetime"
            placeholder="选择日期时间"/>
          <span class="margin-span">结束时间</span>
          <el-date-picker
            v-model="endDateTime"
            class="short-input"
            size="small"
            type="datetime"
            placeholder="选择日期时间"/>
          <el-button size="small" type="primary" style="position: relative; top: -2px;">检索</el-button>
        </div>
        <span class="margin-span">历史录像列表</span>
        <el-table
          :data="tableData"
          class="table-style"
          border
          stripe
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55"/>
          <el-table-column
            prop="id"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="camera_name"
            label="摄像头名称"
          />
          <el-table-column
            prop="start_time"
            label="录像开始时间"/>
          <el-table-column
            prop="end_time"
            label="录像结束时间"/>
          <el-table-column
            prop="file_size"
            label="文件大小"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import Pagego from '@/components/pageGoBtn/index'

export default {
  name: 'Camera',
  components: {
    Pagego
  },
  filters: {
    statusFilter: function (status) {
      switch (status) {
        case 1:
          return '正常'
        case 2:
          return '临近期'
        case 3:
          return '已过期'
        case 4:
          return '损坏'
      }
    }
  },
  data () {
    return {
      videoTypeOptions: [
        { // id下拉选项
          value: '1',
          label: '设备录像'
        }, {
          value: '2',
          label: '报警录像'
        }
      ],
      videoType: '', // 录像类型
      startDateTime: '', // 开始时间
      endDateTime: '', // 结束时间
      isaddModelShow: false, // 新增模块是否显示
      whellPatrolBoxShow: false, // 轮训是否显示
      positonMngBoxShow: false, // 预置位管理是否显示
      positionName: '', // 预设位名称
      positionID: '', // 预设位ID
      sliderValue: 40, // 云台速度
      isCloudPlatformShow: false, // 云台控制整个模块是否显示
      options: [
        { // id下拉选项
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        }, {
          value: '4',
          label: '4'
        }
      ],
      positionList: [ // 预置位列表
        {
          id: 1,
          name: '大门方向'
        },
        {
          id: 2,
          name: '出口方向'
        }
      ],
      whellPatrolList: [ // 轮巡组列表
        {
          group_id: 1,
          group_name: '轮巡组一',
          child_list: [
            {
              id: 1,
              title: '停车场摄像头一'
            },
            {
              id: 2,
              title: '停车场摄像头一'
            }
          ]
        }
      ],
      currentPage4: 4,
      searchText: '',
      tableData: [{
        id: '1',
        camera_name: '摄像头一',
        start_time: '2018-10-14 10:06:44',
        end_time: '2018-10-16 09:47:56',
        file_size: '1176584Kb'
      },
      {
        id: '2',
        camera_name: '摄像头二',
        start_time: '2018-10-14 10:06:44',
        end_time: '2018-10-16 09:47:56',
        file_size: '1176584Kb'
      },
      {
        id: '3',
        camera_name: '摄像头三',
        start_time: '2018-10-14 10:06:44',
        end_time: '2018-10-16 09:47:56',
        file_size: '1176584Kb'
      },
      {
        id: '4',
        camera_name: '摄像头四',
        start_time: '2018-10-14 10:06:44',
        end_time: '2018-10-16 09:47:56',
        file_size: '1176584Kb'
      },
      {
        id: '5',
        camera_name: '摄像头五',
        start_time: '2018-10-14 10:06:44',
        end_time: '2018-10-16 09:47:56',
        file_size: '1176584Kb'
      },
      {
        id: '6',
        camera_name: '摄像头六',
        start_time: '2018-10-14 10:06:44',
        end_time: '2018-10-16 09:47:56',
        file_size: '1176584Kb'
      },
      {
        id: '7',
        camera_name: '摄像头七',
        start_time: '2018-10-14 10:06:44',
        end_time: '2018-10-16 09:47:56',
        file_size: '1176584Kb'
      },
      {
        id: '8',
        camera_name: '摄像头八',
        start_time: '2018-10-14 10:06:44',
        end_time: '2018-10-16 09:47:56',
        file_size: '1176584Kb'
      }]
    }
  },
  computed: {
    cameraStatus: function () {
      return this.$store.state.camera.status
    }
  },
  watch: {
    'cameraStatus': function (newValue) {
      if (newValue === '2') {
        Message.success('测试：切换到回放画面')
        this.isCloudPlatformShow = false
      } else {
        Message.success('测试：切换到预览画面')
      }
    }
  },
  methods: {
    silderValueChange () {
      Message.success('测试：云台速度----' + this.sliderValue)
    },
    handleCtrlBtn () {
      Message.success('测试：按钮事件触发～')
    },
    showAddModel () {
      this.isaddModelShow = true
    },
    toogleClickShowWheelPatrol () {
      this.whellPatrolBoxShow = !this.whellPatrolBoxShow
    },
    toogleClickShowPositionMng () {
      this.positonMngBoxShow = !this.positonMngBoxShow
    },
    toogleShowCloud () {
      this.isCloudPlatformShow = !this.isCloudPlatformShow
    },
    handleClickDelete (index) {
      this.positionList.splice(index, 1)
      Message.success('删除成功～')
    },
    submitData () {
      if (this.positionID && this.positionName) {
        const _this = this
        const item = this.positionList.find(function (item) {
          // eslint-disable-next-line
          return item.id == _this.positionID
        })
        if (!item) {
          this.positionList.push({ id: this.positionID, name: this.positionName })
          this.positionName = ''
          this.positionID = ''
          this.isaddModelShow = false
          Message.success('新增成功～')
        } else {
          Message.error('ID重复')
        }
      } else {
        Message.error('请填写完整再提交')
      }
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="stylus">
.videosurveillance-container{
  margin: 15px;
  color: #828282;
  font-size: 16px;
  background-color: #fff;
  padding-top: 0px;
  .el-input{
    display: inline-block;
  }
  .short-input{
    width 209px
    margin-right 50px
  }
  .add-btn-class{
    background-color #49bbd0
  }
  .confirm-btn-class{
    background-color #0bd38a
  }
  .short-width{
    width 160px
    .el-input__inner{
      border-radius 0px
    }
  }
  .page-title{
    width:100%;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 5px;
    padding: 0 15px;
    .icon{
      width: 22px;
      height: 22px;
      position: relative;
      top: 3px;
    }
  }
  .main-content{
    padding: 9px;
    .tool-bar {
      padding: 10px 0px;
      position: relative;
      .search-box{
        position: absolute;
        right: 10px;
        top: 10px;
        .el-input{
          width: 120px;
        }
      }
    }
    .camera-video-container{
      display inline-block
      height 583px
      width 100%
      line-height 583px
      text-align center
      position relative
      background-color #adacb5
      transition all 0.35s cubic-bezier(0.45, 1, 0.4, 1)
      .open-cloud-platform {
        display inline-block
        background-color #293b4b
        color #49bbd0
        height 32px
        padding 0px 11px
        line-height 32px
        position absolute
        right 0px
        top 0px
        font-size 13px
        cursor pointer
        :hover{
          color #fff
        }
      }
    }
    .short-video-width{
      width calc(100% - 257px)
    }
    .cloud-platform-ctrl{
      display inline-block
      position absolute
      min-height 583px;
      width 257px
      right -257px
      background-color #1a1e25
      overflow hidden
      transition all 0.35s cubic-bezier(0.45, 1, 0.4, 1)
      color #c0c0c0
      .ctrl-box{
        border-bottom 1px solid #32374b
        .ctrl-btns{
          margin 10px 0px
          .ctrl-btns-row{
            margin 5px 10px
            .ctrl-btn{
              display inline-block
              border 1px solid #2c323d
              height 30px
              width 30px
              font-size 19px
              line-height 30px
              text-align center
              margin-right 7px
              border-radius 3px
              color #49bbd0
              cursor pointer
            }
            :last-child{
              margin 0
            }
            :hover{
              color #fff
            }
            .ctrl-text{
              width 28px
              font-size 14px
              line-height 30px
              position relative
              top -2px
              border none
              color #c0c0c0
            }
          }
        }
      }
      .position-list{
          list-style none
          line-height 40px
          margin 0
          font-size 14px
          padding-inline-start 0
          li {
            padding-left 30px
            margin 0
            text-align left
            display inline-block
            width 100%
            position relative
            border-bottom 1px solid #32374b
            .list-ponit{
              display inline-block
              width 7px
              height 7px
              background-color #c0c0c0
              border-radius 50%
              position absolute
              left 15px
              top 18px
            }
            .right-btns-box{
              display inline-block
              float right
              margin-right 10px
              .position-list-btn {
                display inline-block
                width 21px
                height 21px
                line-height 21px
                text-align center
                color #fff
                margin-right 5px
              }
              .back{
                background-color #35b184
              }
              .del{
                background-color #c00a39
              }
            }
          }
        }
      .position-mng-box{
        border-bottom 1px solid #32374b
        .positon-item{
          width 230px
          margin 0 auto
          padding 5px 0px 10px 0px
          .item-name-span{
            display inline-block
            width 55px
            text-align justify
            font-size 13px
            margin-right 10px
            color #f0f2f5
          }
          .name-span{
            position relative
            top 16px
          }
        }
      }
      .wheel-patrol-box{
        .wheel-patrol-item{
          .item-title{
            display inline-block
            width 100%
            font-size 14px
            padding-left 22px
            line-height 40px
            border-bottom 1px solid #32374b
          }
          .position-list{
            li{
              padding-left 50px
              .list-ponit{
                left 35px
              }
            }
          }
        }
      }
      .slider-box{
        width 175px
        position relative
        left 69px
        top -10px
        .demonstration{
          font-size 12px
          display inline-block
          position absolute
          left -58px
          top 12px
        }
        .slider-color{
          >.el-slider__runway{
            background-color #676767
            >.el-slider__button-wrapper{
              >.el-slider__button{
                background-color #49bbd0
                border 2px solid #49bbd0
              }
            }
            >.el-slider__bar{
              background-color: #49bbd0
            }
          }
        }
      }
      .title{
        cursor pointer
        margin 0
        padding 0
        font-size 14px
        height 30px
        line-height 30px
        background-color #222531
        padding-left 5px
      }
      .title:hover{
        color #fff
      }
    }
    .show-cloud-patform-box{
      right 24px
    }
    .video-tools-box{
      height 86px
      background-color #252428
      color #fff
      font-size 33px
      line-height 86px
      padding-left 20px
      .icon{
        margin-right 20px
      }
      .icon-shipinleidanhuamian{
        font-size 38px
        position relative
        top 3px
      }
    }
    .playback-content{
       font-size 14px
      .playback-search-box {
        height 50px
        line-height 50px
        margin 10px 0px
      }
      .margin-span{
        margin-right 10px
      }
      .table-style{
        margin-top 20px
      }
    }
  }
}
</style>
